<template>
  <div class="app-container">
    <!-- 文件列表 -->
    <transition-group name="el-fade-in-linear" tag="ul">
      <li :key="index" class="li" v-for="(file, index) in pictureList">
        <div style="height: 600px; width: 100%;">
          <img :src="file.url" v-if="file.url !== null" alt=""/>
          <iframe
            :src="file.url"
            frameborder="0"
            scrolling="auto"
            style="width: 100%; height: 100%;"
            v-if="file.url !== null"
          />
        </div>
      </li>
    </transition-group>
  </div>


</template>

<script>
import { listPicture } from "@/api/mes/md/bomPicture";


export default {
  name: "Picture",
  props: {
    processId: null,
    bomId: null,
  },
  data() {
    return {
      // BOM工序图纸表格数据
      pictureList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        bomId: this.bomId,
        processId: this.processId,
        url: null,
      },
      form: {},
      fileType: ["pdf"]
    };
  },
  created() {
    this.getList();
  },
  watch: {
    processId(v) {
      this.queryParams.processId = v;
      this.getList();
    },
    'bomId': function (newValue, oldValue) {
      this.queryParams.bomId = newValue;
      this.getList();
    }
  },
  methods: {
    /** 查询BOM工序图纸列表 */
    getList() {
      this.pictureList = []
      listPicture(this.queryParams).then(response => {
        let list = response.rows;
        list.some(item => {
          this.pictureList.push({'url': item.url, 'name': item.url});
        })
      });
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        bomId: this.bomId,
        processId: this.processId,
        url: null,
        remark: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
      };
    },
    // 获取文件名称
    getFileName(name) {
      if (name.lastIndexOf("/") > -1) {
        return name.slice(name.lastIndexOf("/") + 1);
      } else {
        return "";
      }
    },

  }
};
</script>
<style lang="scss">
.li {
  list-style-type: none;
  margin-right: 30px;
}
</style>
